<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <!-- meta使用viewport以确保页面可自由缩放 -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome 图标
    Font Awesome 是一套绝佳的图标字体库和CSS框架。

    Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

    要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- jquerymobile -->
    <!-- jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。

    jQuery Mobile 可以应用于智能手机与平板电脑。

    jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。 
    jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上，如果您了解 jQuery，您可以很容易的学习 jQuery Mobile。

    jQuery Mobile 使用了极少的 HTML5、CSS3、JavaScript 和 AJAX 脚本代码来完成页面的布局渲染。-->
        <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>jQuery Mobile（12.14）</title>
    <style>
        
        li{
            list-style:none;
            /* display:flex; */
        }
        
    </style>
</head>
<body>
    <!-- jquerymobile页面 的组成 -->
    <!-- data-role="page"定义一个页面 -->
    <!-- data-role="header"顶部 区域-->
    <!-- div data-role="content"内容 区域 -->
    <!-- div data-role="footer"底部 区域 -->

    <!-- <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>页面标题</h1>
            <h2>欢迎学习 jquerymobile</h2>
        </div>
    
        <div data-role="content">
            <p>页面内容</p>
        </div>
    
        <div data-role="footer">
            <h1>页面底部内容</h1>
        </div>
    </div> -->

    <!-- <div class="container"></div> -->

    <duv id="pageOne" data-role="page">
        <div data-role="header" data-theme="b">
            <!-- 工具栏/头部栏 -->
            <!-- 内联按钮  -->
            <button>登录</button>
            <button>取消</button>
            <h1>欢迎学习 jquerymobile</h1>
            <div data-role="navbar">
                <ul>
                <li><a href="#">项目1</a></li>
                <li><a href="#">项目2</a></li>
                <li><a href="#">项目3</a></li>
                <li><a href="#">项目4</a></li>
            </ul>
            </div>
            <!-- <button><a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a></button>
            <h1>我的主页</h1>
            <button><a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-right">搜索</a></button> -->
            
        </div>
        <div data-role="main" class="ul-content">
            <a  href="#pageTwo" data-direction="reverse" data-transition="flip"><p>跳转到第二个页面</p></a>
            <a  data-role="button" href="#pageTwo" data-direction="reverse" data-transition="flip"><p>跳转到第二个页面(按钮跳转)</p></a>
            <button>普通按钮</button>
            <button data-inline="true"> 普通按钮</button>
            <a data-role="button" data-inline="true">超连接按钮</a>
            <a data-role="button">超连接按钮</a>

            <!-- 垂直方向上 按钮组 -->
            <div data-role="controlgroup">
                <button class="ui-btn ui-icon-search ui-btn-icon-right">按钮1</button>
                <button>按钮2</button>
                <button>按钮3</button>
            </div>

            <!-- 水平方向上 按钮组 -->
            <div data-role="controlgroup" data-type="horizontal">
                <button>按钮1</button>
                <button>按钮2</button>
                <button>按钮3</button>
            </div>


            <!-- 带图标按钮 -->

            <!-- 后退按钮 -->

            <!-- jquerymobile按钮图标 -->

            <!-- 工具栏/头部栏 -->

            <!-- 导航栏 -->


            <div  data-role="navbar" >
                <ul>
                    <li>
                        <a href="#" data-icon="plus"  >更多</a>
                    </li>               
                    <li>
                        <a href="#" data-icon="minus" >更少</a>
                    </li>
                    <li>
                        <a href="#" data-icon="delete" >删除</a>
                    </li>                
                    <li>
                        <a href="#" data-icon="check">喜爱</a>
                    </li>
                    <li>
                        <a href="#" data-icon="info">信息</a>
                    </li>
                </ul>          
            </div>

        </div>
        <!-- data-position="fixed"固定在底部 -->
        <div data-role="footer"  data-position="fixed" data-theme="b">
            <h1>jquerymobile 底部</h1>

            <div data-role="controlgroup" data-type="horizontal" style="text-align: center" data-role="navbar">
                <!-- <ul> -->
                    <!-- <li> -->
                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left" >更多</a>
                    <!-- </li>                -->
                    <!-- <li> -->
                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-minus ui-btn-icon-left">更少</a>
                    <!-- </li> -->
                    <!-- <li> -->
                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">删除</a>
                    <!-- </li>                 -->
                    <!-- <li> -->
                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-check ui-btn-icon-left">喜爱</a>
                    <!-- </li> -->
                    <!-- <li> -->
                        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-info ui-btn-icon-left">信息</a>
                    <!-- </li>   -->
                <!-- </ul>           -->
            </div>
        
        </div>
    </duv>

    <!-- data-dialog="true" 页面对话框形式展示 -->
    <duv id="pageTwo" data-role="page" >
        <div data-role="header">
            <h2>欢迎学习 jquerymobile</h2>
        </div>
        <div data-role="main" class="ul-content">
            <p>第二个页面</p>
            <a href="#pageOne" data-translate="flip">跳转到第一个页面</a><br>
            <a href="#pageThree" data-translate="flip">跳转到第三个页面</a>
            
        </div>
        <div data-role="footer" class="">
            <h2>jquerymobile 底部</h2>
        </div>
    </duv>

    <div id="pageThree" data-roleo="page">
        <div data-role="header">
            <h1>jquerymobile头部</h1>
        </div>
        <div data-role="main" class="ul-content">
            <p>这里是内容</p>
            <a href="#pageTwo" data-translate="flip">跳转到第二个页面</a>
        </div>
        <div data-role="footer">
            <h1>jquerymobile底部</h1>
        </div>
    </div>
    
</body>
</html>